<div class="">
  <script>
    var startDate = '${startDate}';
    var endDate = '${endDate}';
    var yesterDate = '${yesterDay}';
    var betweenOneDay = '${betweenOneDay}';
    var masterNum = '${appDetail.masterNum}';
    var appId = '${appId}';
    var chartType = 'line';
    var chartParams = "&startDate=" + startDate + "&endDate=" + endDate;
    var chartParamsCompare = "&startDate=" + yesterDate + "&endDate=" + startDate;
    var betweenParams = "&startDate=" + yesterDate + "&endDate=" + endDate;
    var appTotalMem = '${appDetail.mem}';

    //改变内存阀值
    function cleanAppData(appId){
      var appCleanDataBtn = document.getElementById("appCleanDataBtn");
      appCleanDataBtn.disabled = true;

      $.post(
              '${request.contextPath}/admin/app/cleanAppData',
              {
                appId: appId
              },
              function(data){
                if(data==1){
                  alert("appId:" + appId + "清除数据成功！");
                }else{
                  alert("appId:" + appId + "清除数据失败,请联系管理员查看原因！");
                }
                appCleanDataBtn.disabled = false;
              }
      );
    }
  </script>
  <div class="">
    <div class="card">
      <div class="card-body">
        <div class="row">
          <div class="col-lg-5 text-lg-left">
            <h3 class="card-title">应用:
            <#if isMaster?? && (isMaster!)>
              <a href="${request.contextPath}/manage/app/index?appId=${appId!}" target="_blank">${appDetail.appDesc.name!}</a>
            <#else>
              ${appDetail.appDesc.name!}
            </#if>
            </h3>
          </div>
          <div class="col-lg-7">
            <form method="post" action="${request.contextPath}/admin/app/index" id="ec" name="ec" class="row d-flex justify-content-end">
              <label class="col-form-label col-auto" style="font-weight:bold;text-align:left;">
                日期:&nbsp;&nbsp;
              </label>
              <input class="col-auto" type="date" size="21" name="startDate" id="startDate" value="${startDate}"/>

              <input type="hidden" size="20" name="endDate" id="endDate" value="${endDate}"/>
              <input type="hidden" name="appId" value="${appDetail.appDesc.appId}">
              <input type="submit" class="btn btn-primary col-auto ml-2" value="查询"/>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-lg-6 text-lg-left">
      <div class="card">
        <div class="card-header">
          <h3 class="card-title">
            全局信息&nbsp;&nbsp;
            <a target="_blank" href="${request.contextPath}/admin/app/appScale?appId=${appId}" class="btn btn-primary" role="button">申请扩容</a>
            <a target="_blank" href="${request.contextPath}/admin/app/appConfig?appId=${appId}" class="btn btn-primary" role="button">申请修改配置</a>
            <a target="_blank" href="${request.contextPath}/client/show/index?appId=${appId}" class="btn btn-primary"
               role="button">客户端统计</a>
            <#if appDetail.appDesc.appPassword??>
              <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#appCodeChangeModal">
                应用密码
              </button>
            </#if>
            <#if (appDetail.appDesc.status == 2) && (appDetail.appDesc.isTest == 1)>
                <button id="appCleanDataBtn" type="button" class="btn btn-primary" onclick="if(window.confirm('确认要清除应用appid=${appDetail.appDesc.appId}的数据?!')){cleanAppData('${appDetail.appDesc.appId}');return true;}else{return false;}">清空数据</button>
            </#if>
          </h3>
        </div>
        <div class="card-body">
          <div class="table-responsive">
            <table class="table table-striped table-hover">
              <tbody>
              <tr>
                <td>内存使用率</td>
                <td>
                  <div class="progress progress-fs-1" role="progressbar" aria-valuenow="${appDetail.memUsePercent}" aria-valuemax="100"
                       aria-valuemin="0" >
                    <#if (appDetail.memUsePercent >= 80.00)>
                        <div class="progress-bar bg-danger"
                             style="width: ${appDetail.memUsePercent}%;overflow:visible;">
                    <#else>
                        <div class="progress-bar bg-success"
                             style="width: ${appDetail.memUsePercent}%;overflow:visible;">
                    </#if>
                        <span style="color: #000000; margin-bottom: 0">
                        ${(appDetail.mem  * appDetail.memUsePercent / 100 / 1024)?string("#.##")}G&nbsp;&nbsp;Used/${(appDetail.mem / 1024 * 1.0)?string("#.##")}G&nbsp;&nbsp;Total
                        </span>
                    </div>
                  </div>
                </td>
                <td>当前连接数</td>
                <td>${appDetail.conn}</td>
              </tr>
              <tr>
                <td>应用版本</td>
                <td>${appDetail.appDesc.versionName}</td>
                <td>应用类型</td>
                <td>${appDetail.appDesc.typeDesc!}</td>
              </tr>
                <tr>
                  <td>应用主节点数</td>
                  <td>${appDetail.masterNum}</td>
                  <td>应用从节点数</td>
                  <td>${appDetail.slaveNum}</td>
                </tr>
                <tr>
                  <td>应用命中率</td>
                  <td><a href="${request.contextPath}/admin/app/getAppHitRatioInfo?appId=${appDetail.appDesc.appId}" target="_blank" >${appDetail.hitPercent}%</a></td>
                  <td>当前对象数</td>
                  <td>${(appDetail.currentObjNum)?string("#,#00")}
                </tr>
                <tr>
                  <td>应用当前状态</td>
                  <td>${appDetail.appDesc.statusDesc}</td>
                  <td>应用分布机器数量</td>
                  <td>${appDetail.machineNum}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div class="card-header">
          <h3 class="card-title">各命令峰值信息</h3>
        </div>
        <div class="table-responsive">
          <table class="table table-striped table-hover">
            <thead>
              <tr>
                <th scope="col">命令</th>
                <th scope="col">峰值QPM</th>
                <th scope="col">峰值产生时间</th>
              </tr>
            </thead>
            <tbody>
              <#list  top5ClimaxList as command>
                <tr>
                  <td>${command.commandName}</td>
                  <td>${(command.commandCount)?string(00)}</td>
                  <td>${((command.createTime)?string("yyyy-MM-dd HH:mm"))!}</td>
                </tr>
              </#list>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <div class="col-lg-6">
      <div class="card">
        <div class="card-header">
          <h3 class="card-title">命令调用统计</h3>
        </div>
        <div class="table-responsive">
          <table class="table table-striped table-hover">
            <thead>
            <tr>
              <th scope="col">总调用量(天)</th>
              <th scope="col">${commandCount!}</th>
            </tr>
            </thead>
          </table>
        </div>

        <div class="card-body">
          <div id="containerTop5" class="echart p-4"  style="min-height: 400px;">
            <script>
              function setFigureOption(title, dataArr){
                var length = dataArr.length;
                var series = [];
                var labels = [];
                var dataSeries = [];
                for (var i = 0; i < length; i++) {
                  var data = dataArr[i];
                  labels.push(data.commandName);
                  series.push(data.y);
                  var dataPoint = {
                    name: data.commandName + " : " + data.y,
                    value: data.y,
                  };
                  dataSeries.push(dataPoint);
                }
                var options = {
                  title: {
                    text: title,
                    left: 'center'
                  },
                  tooltip: {
                    trigger: 'item'
                  },
                  legend: {
                    orient: 'vertical',
                    left: 'right'
                  },
                  series: [{
                    type: 'pie',
                    radius: '65%',
                    data: dataSeries,
                    emphasis: {
                      itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                      }
                    }
                  }]
                };
                return options;
              }

              function initFigure(id, title, dataArr){
                echarts.init(document.querySelector("#" + id)).setOption(setFigureOption(title, dataArr));
              };

              $(document).ready(
                      function () {
                        var pieUrl = "${request.contextPath}/admin/app/getTop5Commands?appId=" + appId + chartParams;
                        $.ajax({
                          type: "get",
                          url: pieUrl,
                          async: true,
                          success: function (data) {
                            var dataArr = eval("(" + data + ")");
                            initFigure('containerTop5', '命令分布', dataArr);
                          }
                        });
                      });
            </script>
          </div>
        </div>
      </div>
    </div>
  </div>

      <!-- 全命中统计 -->
  <div id="containerCommands"
       style="max-width: 100%; min-width: 310px; height: 350px; margin: 0 auto"></div>

  <!-- 命中相关 -->
  <div id="containerHits"
       style="max-width: 100%; min-width: 310px; height: 350px; margin: 0 auto"></div>

  <!-- 网络流量 -->
  <div id="containerNet" style="max-width: 100%; min-width: 310px; height: 350px; margin: 0 auto"></div>

  <!-- CPU消耗流量 -->
  <div id="containerCpuUsed" style="max-width: 100%; min-width: 310px; height: 350px; margin: 0 auto"></div>

  <!-- 内存变化相关 -->
  <div id="containerMemory"
       style="max-width: 100%; min-width: 310px; height: 350px; margin: 0 auto"></div>

  <!-- 客户端连接数相关 -->
  <div id="containerClients"
       style="max-width: 100%; min-width: 310px; height: 350px; margin: 0 auto"></div>

  <!-- dbsize相关 -->
  <div id="containerDbsize"
       style="max-width: 100%; min-width: 310px; height: 350px; margin: 0 auto"></div>

  <!-- 过期/淘汰键变化相关 -->
  <div id="containerExpiredEvictedKeys"
       style="max-width: 100%; min-width: 310px; height: 350px; margin: 0 auto"></div>
  <!-- 命令相关 -->
  <script type="text/javascript">
    //查询一天出每分钟数据
    if (betweenOneDay == 1) {
      $(document).ready(
              function () {
                var options = getOption("containerCommands", "<b>全命令统计</b>", "次数");
                var commandsUrl = "${request.contextPath}/admin/app/getMutiDatesCommandStats.json?appId=" + appId + betweenParams;
                $.ajax({
                  type: "get",
                  url: commandsUrl,
                  async: true,
                  success: function (data) {
                    var dates = new Array();
                    dates.push(startDate);
                    dates.push(yesterDate);
                    pushOptionSeries(options, data, dates, "命令趋势图");
                    new Highcharts.Chart(options);
                  }
                });

              });
    } else {
      $(document).ready(
              function () {
                var options = getOption("containerCommands", "<b>全命令统计</b>", "次数");
                var commandsUrl = "${request.contextPath}/admin/app/getCommandStats?appId=" + appId + chartParams;
                $.ajax({
                  type: "get",
                  url: commandsUrl,
                  async: true,
                  success: function (data) {
                    var nameLegend = "命令趋势图";
                    var finalPoints = getSeriesPoints(data, nameLegend);
                    options.series.push(finalPoints);
                    new Highcharts.Chart(options);
                  }
                });
              });
    }
  </script>

  <!-- 命中相关 -->
  <script type="text/javascript">
    //查询一天出每分钟数据
    if (betweenOneDay == 1) {
      $(document).ready(
              function () {
                var options = getOption("containerHits", "<b>命中统计</b>", "次数");
                var commandsUrl = "${request.contextPath}/admin/app/getMutiDatesAppStats.json?appId=" + appId + "&statName=hits" + betweenParams;
                $.ajax({
                  type: "get",
                  url: commandsUrl,
                  async: true,
                  success: function (data) {
                    var dates = new Array();
                    dates.push(startDate);
                    dates.push(yesterDate);
                    pushOptionSeries(options, data, dates, "命中趋势图");
                    new Highcharts.Chart(options);
                  }
                });
              });
    } else {
      $(document).ready(
              function () {
                var options = getOption("containerHits", "<b>命中统计</b>", "次数");
                var commandsUrl = "${request.contextPath}/admin/app/getAppStats.json?appId=" + appId + "&statName=hits" + chartParams + "&timeDimensionalityIndex=1";
                $.ajax({
                  type: "get",
                  url: commandsUrl,
                  async: true,
                  success: function (data) {
                    var nameLegend = "命中趋势图";
                    var finalPoints = getSeriesPoints(data, nameLegend);
                    options.series.push(finalPoints);
                    new Highcharts.Chart(options);
                  }
                });
              });
    }
  </script>

  <!-- 网络流量 -->
  <script type="text/javascript">
    var allInstanceNetStatUrl = "${request.contextPath}/admin/app/appInstanceNetStat?appId=" + appId + chartParams;
    $(document).ready(
            function () {
              var options = getOption("containerNet", "<b>网络流量<a href='" + allInstanceNetStatUrl + "' target='_blank'>(查看实例流量)</a><b>", "");
              //网络流量
              var netUrl = "${request.contextPath}/admin/app/getMutiStatAppStats.json?appId=" + appId + "&statName=netInput,netOutput" + chartParams;
              $.ajax({
                type: "get",
                url: netUrl,
                async: true,
                success: function (data) {

                  var dataObject = eval("(" + data.data + ")");
                  var inputDataArr = dataObject["netInput"];

                  //1.input
                  var inputPoints = getNetPoints(inputDataArr, "net_input");
                  //确认单位
                  options.yAxis.title.text = inputPoints.unitTxt;
                  var unit = inputPoints.unit;

                  options.series.push(inputPoints);

                  //2.output
                  var outputDataArr = dataObject["netOutput"];
                  var outputPoints = getNetPoints(outputDataArr, "net_output", unit);
                  options.series.push(outputPoints);

                  new Highcharts.Chart(options);
                }
              });
            });
  </script>

  <!-- CPU消耗流量 -->
  <script type="text/javascript">
    var containerCpuUsedUrl = "${request.contextPath}/admin/app/appInstanceCpuStat?appId=" + appId + chartParams;
    $(document).ready(
            function () {
              var options = getOption("containerCpuUsed", "<b>CPU消耗<a href='" + containerCpuUsedUrl + "' target='_blank'>(查看实例CPU消耗)</a><b>", "");
              //网络流量
              var cpuUsedUrl = "${request.contextPath}/admin/app/getMutiStatAppStats.json?appId=" + appId + "&statName=cpuSys,cpuUser,cpuSysChildren,cpuUserChildren" + chartParams;
              $.ajax({
                type: "get",
                url: cpuUsedUrl,
                async: true,
                success: function (data) {
                  var dataObject = eval("(" + data.data + ")");

                  //1.cpuSys
                  var cpuSysDataArr = dataObject["cpuSys"];
                  var cpuSysPoints = getCpuPoints(cpuSysDataArr, "cpu_sys", 1);
                  options.series.push(cpuSysPoints);
                  //确认单位
                  var unit = cpuSysPoints.unit;
                  options.yAxis.title.text = cpuSysPoints.unitTxt;

                  //2.cpuUser
                  var cpuUserDataArr = dataObject["cpuUser"];
                  var cpuUserPoints = getCpuPoints(cpuUserDataArr, "cpu_user", 1);
                  options.series.push(cpuUserPoints);

                  //3.cpuSysChildren
                  var cpuSysChildrenDataArr = dataObject["cpuSysChildren"];
                  var cpuSysChildrenPoints = getCpuPoints(cpuSysChildrenDataArr, "cpu_sys_children", 1);
                  options.series.push(cpuSysChildrenPoints);

                  //4.cpuUserChildren
                  var cpuUserChildrenDataArr = dataObject["cpuUserChildren"];
                  var cpuUserChildrenPoints = getCpuPoints(cpuUserChildrenDataArr, "cpu_user_children", 1);
                  options.series.push(cpuUserChildrenPoints);

                  // //5.cou base
                  // var cpuBasePoints = getBaseCpuPoints(cpuSysDataArr, "cpu_warning", 1);
                  // options.series.push(cpuBasePoints);

                  new Highcharts.Chart(options);
                }
              });
            });
  </script>

  <!-- 内存变化相关 -->
  <script type="text/javascript">


    /*if(betweenOneDay == 1){*/
    var containerMemFragRatioUrl = "${request.contextPath}/admin/app/appInstanceMemFragRatioStat?appId=" + appId + chartParams;
    $(document).ready(
            function () {
              var options = getOption("containerMemory", "<b>内存使用量<a href='" + containerMemFragRatioUrl + "' target='_blank'>(查看实例内存碎片率)</a></b>", "M");
              var commandsUrl = "${request.contextPath}/admin/app/getMutiStatAppStats.json?appId=" + appId + "&statName=usedMemory,usedMemoryRss" + chartParams;
              $.ajax({
                type: "get",
                url: commandsUrl,
                async: true,
                success: function (data) {
                  var dataObject = eval("(" + data.data + ")");
                  var usedMemoryDataArr = dataObject["usedMemory"];

                  //1.usedMemory
                  var usedMemoryPoints = getMemoryPoints(usedMemoryDataArr, "used_memory", 1);
                  //确认单位
                  options.yAxis.title.text = usedMemoryPoints.unitTxt;
                  var unit = usedMemoryPoints.unit;

                  options.series.push(usedMemoryPoints);

                  //2.usedMemoryRss
                  var usedMemoryRssDataArr = dataObject["usedMemoryRss"];
                  var usedMemoryRssPoints = getMemoryPoints(usedMemoryRssDataArr, "used_memory_rss", 1);
                  //确认单位
                  options.yAxis.title.text = usedMemoryRssPoints.unitTxt;
                  var unit = usedMemoryRssPoints.unit;
                  options.series.push(usedMemoryRssPoints);

                  //3. 应用总内存
                  var maxMemoryPoints = getMemoryPoints(usedMemoryRssDataArr, "应用总内存", 1, parseInt(appTotalMem));
                  options.series.push(maxMemoryPoints);

                  new Highcharts.Chart(options);

                }
              });
            });
  </script>

  <!-- 客户端连接数相关 -->
  <script type="text/javascript">
    //查询一天出每分钟数据
    $(document).ready(
            function () {
              var options = getOption("containerClients", "<b>客户端连接统计</b>", "个");
              var commandsUrl = "${request.contextPath}/admin/app/getMutiDatesAppStats.json?appId=" + appId + "&statName=connectedClient" + betweenParams;
              $.ajax({
                type: "get",
                url: commandsUrl,
                async: true,
                success: function (data) {
                  var dates = new Array();
                  dates.push(startDate);
                  dates.push(yesterDate);
                  pushOptionSeries(options, data, dates, "客户端连接趋势图", "个");
                  new Highcharts.Chart(options);
                }
              });
            });
  </script>

  <!-- bsize相关 -->
  <script type="text/javascript">
    //查询一天出每分钟数据
    $(document).ready(
            function () {
              var options = getOption("containerDbsize", "<b>键个数统计</b>", "个");
              var commandsUrl = "${request.contextPath}/admin/app/getMutiDatesAppStats.json?appId=" + appId + "&statName=objectSize" + betweenParams;
              $.ajax({
                type: "get",
                url: commandsUrl,
                async: true,
                success: function (data) {
                  var dates = new Array();
                  dates.push(startDate);
                  dates.push(yesterDate);
                  pushOptionSeries(options, data, dates, "键个数趋势图", "个");
                  new Highcharts.Chart(options);
                }
              });
            });
  </script>

  <!-- 过期/淘汰键变化相关 -->
  <script type="text/javascript">


    /*if(betweenOneDay == 1){*/
    var containerExpiredKeysUrl = "${request.contextPath}/admin/app/appInstanceExpiredEvictedKeysStat?appId=" + appId + chartParams;
    $(document).ready(
            function () {
              var options = getOption("containerExpiredEvictedKeys", "<b>过期/淘汰键统计<a href='" + containerExpiredKeysUrl + "' target='_blank'>(查看实例过期/淘汰键统计)</a></b>", "个");
              var commandsUrl = "${request.contextPath}/admin/app/getMutiStatAppStats.json?appId=" + appId + "&statName=expiredKeys,evictedKeys" + chartParams;
              $.ajax({
                type: "get",
                url: commandsUrl,
                async: true,
                success: function (data) {
                  var dataObject = eval("(" + data.data + ")");
                  var expiredKeysDataArr = dataObject["expiredKeys"];
                  //1.expiredKeys
                  var expiredKeysPoints = getKeyPoints(expiredKeysDataArr, "expired_keys", 0);
                  //确认单位

                  options.yAxis.title.text = expiredKeysPoints.unitTxt;
                  var unit = expiredKeysPoints.unit;

                  options.series.push(expiredKeysPoints);

                  //2.evictedKeys
                  var evictedKeysDataArr = dataObject["evictedKeys"];
                  var evictedKeysPoints = getKeyPoints(evictedKeysDataArr, "evicted_keys", 0);
                  //确认单位
                  options.yAxis.title.text = evictedKeysPoints.unitTxt;
                  var unit = evictedKeysPoints.unit;
                  options.series.push(evictedKeysPoints);

                  new Highcharts.Chart(options);

                }
              });
            });
  </script>

  <div id="appCodeChangeModal" class="modal fade" tabindex="-1" aria-labelledby="appCodeChangeModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">

        <div class="modal-header">
          <h4 class="modal-title" id="appCodeChangeModalLabel">应用密码</h4>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" onclick="closeModal('appCodeChangeModal')"></button>
        </div>

        <div class="modal-body">
          <div class="container-fluid">
            <div class="row">
              <!-- 控件开始 -->
              <div class="col-md-12">
                <div class="form-group row">
                  <label class="col-md-3 col-form-label">当前应用密码:</label>
                  <div class="col-md-9">
                    <input type="text" name="appCodeKey" id="appCodeKey" value="${md5password!}"
                         class="form-control"/>
                  </div>
                </div>
                <#if acluser??>
                  <div class="form-group row">
                    <div class="col-md-12">
                      <label class="col-form-label"><font color="red" style="text-decoration: underline;">以下为只读用户，仅供查询使用</font></label>
                    </div>
                    <label class="col-form-label col-md-3">只读用户:</label>
                    <div class="col-md-9">
                      <input type="text" name="acluser" value="${acluser!}"
                             class="form-control"/>
                    </div>
                    <label class="col-form-label col-md-3">只读用户密码:</label>
                    <div class="col-md-9">
                      <input type="text" name="appCodeKey" id="aclCodeKey" value="${aclpassword!}"
                             class="form-control"/>
                    </div>
                  </div>
                </#if>

                <#if userInfo.type == 0>
                  <#if adminUser??>
                    <div class="form-group row">
                      <div class="col-md-12">
                        <label class="col-form-label"><font color="red" style="text-decoration: underline;">以下为管理员用户，请谨慎使用</font></label>
                      </div>
                      <label class="col-form-label col-md-3">管理员:</label>
                      <div class="col-md-9">
                        <input type="text" value="${adminUser!}"
                               class="form-control"/>
                      </div>
                      <label class="col-form-label col-md-3">密码:</label>
                      <div class="col-md-9">
                        <input type="text" value="${adminPassword!}"
                               class="form-control"/>
                      </div>
                    </div>
                  </#if>
                </#if>
              </div>
            </div>
          </div>
        </div>

        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" onclick="closeModal('appCodeChangeModal')">Close</button>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  function closeModal(id){
    let modal = $('#' + id);
    let bootstrapModal = bootstrap.Modal.getOrCreateInstance(modal);
    bootstrapModal.hide();
  }

  // $(function () {
  //   let modal = $('#appCodeChangeModal');
  //   let modalButton = document.getElementById('modal-button');
  //   modalButton.click();
  //
  //   setTimeout(function () {
  //
  //     let bootstrapModal = new bootstrap.Modal(modal);
  //     bootstrapModal.toggle()
  //   }, 3100);
  //
  // });
</script>
